import { Button, Card, Descriptions } from 'antd';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import {
    FooterToolbar,
    PageContainer,
    ProForm,
    ProFormDateRangePicker,
    ProFormDigit,
    ProFormRadio,
    ProFormSelect,
    ProFormText,
    ProFormTextArea,
    ProFormUploadButton,
    ProLayout,
} from '@ant-design/pro-components';

import { useLayoutContext } from '../../api';

import { rrg01FetchModelProvider, SqliteSettings } from '../../services';
import ModelProviderPage from '@/components/header/account-setting/model-provider-page';

export interface AIKeySettingViewProps {
}

export const AIKeySettingView: React.FC<AIKeySettingViewProps> = (props: AIKeySettingViewProps) => {

    const [_peerId, homePath] = useLayoutContext();

    return (
        <Container>
            <StyledCard
                title={'模型供应商'}
                style={{ height: '100%' }}
                styles={{
                    body: {
                        padding: '6px 6px',
                        overflow: 'auto',
                        height: 'calc(100% - 10px)',
                        width: 'calc(100% - 10px)',
                    }
                }}
                extra={[
                    <Button onClick={async () => {
                        let res = await rrg01FetchModelProvider();
                    }}>同步供应商</Button>
                ]}
            >
                <ModelProviderPage />
            </StyledCard>
        </Container>
    );
}

const Container = styled.div`
    width: 100%;
    height: 100%;
    padding:10px;
    padding-top:30px;
`;

const StyledCard = styled(Card)`
    width: 100%;
`

